<template>
    <h2>会员卡</h2>
    <router-link :to="{ name: 'AddMembershipCard' }">
      <el-button type="primary" style="margin-bottom: 20px;">
        添加会员卡
      </el-button>
    </router-link>
    <el-table :data="paginatedData" :border="true" style="width:100%">
      <el-table-column prop="membershipCardName" label="会员卡名称" width="150" />
      <el-table-column prop="price" label="价格" width="150" />
      <el-table-column prop="cardType" label="卡类型" width="150" />
      <el-table-column prop="AvailableTimes" label="可用次数" width="150" />
      <el-table-column prop="AvailableDays" label="到期时间" width="200" />
      <el-table-column label="操作" :align="center">
        <template v-slot="scope">
          <el-button style="margin-right: 5px;color: blue;" @click="Edit(scope.row)">
            编辑
          </el-button>
          <el-button @click="Delete(scope.row.MembershipCard)" style="margin-right: 5px;" color="red">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- Pagination -->
    <div style="margin-top: 20px; text-align: right;">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        v-model:current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  
    <el-dialog v-model="isEditDialogVisible" title="编辑会员卡">
      <el-form :model="editForm">
        <el-form-item label="会员卡名称">
          <el-input v-model="editForm.membershipCardName"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <el-form-item label="描述信息">
          <el-input v-model="editForm.describeInfo"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editForm.note"></el-input>
        </el-form-item>
        <el-form-item label="会员卡类型">
          <el-select v-model="editForm.cardType">
            <el-option label="无期限" value="1"></el-option>
            <el-option label="有期限" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支持课程">
          <el-table :data="editForm.classes" :border="true" style="width:100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="className" label="课程名称" width="150" />
            <el-table-column label="收费">
              <template v-slot="scope">
                <el-input v-model="scope.row.charge" size="mini" placeholder="收费人次"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">确定</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script setup>
  import { onMounted, ref,computed } from "vue";
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { GetMembershipCard, submitEditForm,deleteMembershipCard,updateMembershipCard } from "../../api/MembershipCard";
  
  const MembershipCardData = ref([]);
  const total = ref(0);
  const currentPage = ref(1);
  const pageSize = ref(2);
  
  const fetchData = async () => {
    try {
      const res = await GetMembershipCard();
      MembershipCardData.value = res.data;
      total.value = res.data.length; // 总条数
    } catch (error) {
      console.error("Error:", error);
      alert('error');
    }
  };
  
  onMounted(() => {
    fetchData();
  });
  
  const isEditDialogVisible = ref(false);
  const editForm = ref({
    membershipCardName: '',
    price: '',
    describeInfo: '',
    note: '',
    cardType: '',
    // classes: [
    //   { className: "课程A", charge: 0 },
    //   { className: "课程B", charge: 0 },
    //   { className: "课程C", charge: 0 }
    // ]
  });
  
  const Edit = (row) => {
    Object.assign(editForm.value, row);
    isEditDialogVisible.value = true;
  };
  
  const submitEdit = () => {
    updateMembershipCard(editForm.value).then(res => {
      isEditDialogVisible.value = false;
      if (res.data.code === 200) {
        ElMessage({
          type: 'success',
          message: '信息已更新'
        });
        fetchData();
      }
    }).catch(error => {
      console.error('Error:', error);
      alert('error');
    });
  };
  
  const handleSizeChange = (val) => {
    pageSize.value = val;
    fetchData();
  };
  
  const handleCurrentChange = (val) => {
    currentPage.value = val;
    fetchData();
  };
  
  const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return MembershipCardData.value.slice(start, end);
  });

  const Delete = (MembershipCard) => {
    ElMessageBox.confirm('确定删除该会员卡吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
        deleteMembershipCard(MembershipCard).then(res => {
        ElMessage({
            type: 'success',
            message: '已成功删除'
        });
        fetchData();
        })
        .catch(error => {
        console.error('Error:', error);
        alert('error');
        })
    })
 };
  </script>
  
  <style scoped>
  </style>
  